<template>
  <div>
     <div>
        <!-- v-on用于绑定事件 -->
        <!-- v-on语法：v-on:事件触发类型 -->
        <!-- 第一种写法：v-on:事件名=“要执行的少量代码" -->
        <!-- <button v-on:click="num += 1">按钮</button> -->
        <!-- 第二种写法   v-on:事件名=“methods中的函数名" -->
        <!-- <button v-on:click="fn">按钮</button> -->
        <!-- 第三种写法 v-on:事件名=“methods中的函数名(实参)" -->
        <!-- <button v-on:click="fn1(12)">按钮</button> -->
        <!-- v-on可以缩写成@ -->
        <!-- <button @click="fn1(10)">num加十</button> -->
        <button @click="salary(3000)">发工资啦，我的工资是3000</button><br/><br/>
        <button @click="salary(-2800)">给喜欢的女主播刷了火箭-2800</button><br/><br/>
        <button @click="salary(10000)">送外卖赚了10000</button><br/><br/>
        <button @click="salary(-18000)">给暗恋的女生买了爱马仕-18000</button><br/><br/>
        <button @click="salary(8000)">晚上去做代驾赚了8000</button><br/><br/>
        <button @click="salary(-100)">买泡面100</button><br/><br/>
        <button @click="salary(-50)">买挂逼水50</button><br/><br/>

        <!-- <p>我这个月还有{{num}}元</p> -->

        <!-- <input type="text" @blur='fn'> -->
        <div class="box" @mouseenter="fn"></div>
     </div>
   </div>
</template>
 
<script>
    //之前的写法 不能这么写了
    // document.querySelector('button').addEventListener('click',function(){
    //     console.log(1);
    // })
export default {

  //该vue组件的数据源
  data() {
    return {
        num:0,
        str:'我是data中的str'
    };
  },

  //methods 用来存放事件,methods是一个对象，里面存放了需要触发的事件
  //千万别写成method，事件很多，所以是复数形式后面跟上s
  //事件和事件之间用，隔开
  methods:{
    fn() {
        //在methods当中的函数体里面要使用data中的数据的时候一定要带this
        //this指的是该组件实例
        // console.log(this);
        console.log(this.str);

    },

    fn1(num) {
       this.num += num
    },
    
    //工资函数
    salary(a) {
        //控制data中的num，要用到this
        this.num += a
    }
  }
};
</script>

<style scoped>
    .box {
        width: 500px;
        height: 500px;
        background-color: #087;
    }
</style>